<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            /* 导航条一般44px */
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-bottom: 1px solid #ccc;

        }

        footer {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: 1px solid #ccc;
            height: 50px;
        }

        footer span {
            float: left;
            width: 25%;
            text-align: center;
            line-height: 50px;
        }

        footer .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>
        
        <header>头部</header>
        <!-- 切换的内容 -->
         <main>
            <!-- 
                动态组件使用的是一个 component 的内部组件，给它添加一个 is 属性，该属性
                对应的值就是要显示组件的名称，动态切换的时候我们会先移除当前组件，然后显示
                新的的组件.被移除组件的数据也会被移除掉，我们可以使用缓存的方式解决
            -->
            <component :is="activeIndex"> </component>
         </main>
        <footer>
            <!-- span*4 -->
            <span :class="{active:activeIndex=='home'}" @click="activeIndex='home'">首页</span>
            <span :class="{active:activeIndex=='kind'}" @click="activeIndex='kind'">分类</span>
            <span :class="{active:activeIndex=='cart'}" @click="activeIndex='cart'">购物车</span>
            <span :class="{active:activeIndex=='my'}" @click="activeIndex='my'">我的</span>
        </footer>
    </div>
</body>
<script>
    const home = {
        template: '<h1>home</h1> <input /> '
    }
    const kind = {
        template: '<h1>kind</h1> <input /> '
    }
    const cart = {
        template: '<h1>cart</h1> <input /> '
    }
    const my = {
        template: '<h1>my</h1> <input /> '
    }
    const app = {
        data() {
            return {
                activeIndex: 'home'
            }
        },
        methods: {},
        components:{
            home,
            kind,
            cart,
            my
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>